<template>
  <ee-checkbox class="ee-checkbox-all" :type="state == 1 ? 'tick' : ''"
               :modelValue="state ? [text || eeui.i18n.all] : []"
               :options="[text || eeui.i18n.all]" @click="check">
    <template #default="{ i }">
      <slot :i="i"></slot>
    </template>
  </ee-checkbox>
</template>

<script type="text/javascript">
import { optionsSimpleMixin } from './index'

/** 全选ee-checkbox按钮
 * 
 * 插槽
 * @property {{i}} default - checkbox的默认插槽
 * 
 * @example
 * <ee-checkbox ref="groupRef"></ee-checkbox-group>
 * <ee-checkbox-all :group="$refs.groupRef">
 * 
 * <!-- 或者给 ee-checkbox-all 设置相同的 options 和 modelValue -->
 * <ee-checkbox :options="options" v-model="model"></ee-checkbox-group>
 * <ee-checkbox-all :options="options" v-model="model"></ee-checkbox-all>
 */
export default {
  name: "ee-checkbox-all",
  extends: optionsSimpleMixin,
  props: {
    /** 全选文本，不设置为'全选'，可以通过 i18n.all 统一修改 */
    text: String,
    modelValue: Array,
    /** ee-checkbox的引用 */
    group: {},
  },
  computed: {
    /** 全选按钮状态
     * 0. 全不选
     * 1. 全选
     * 2. 有选中但没全选
     */
    state() {
      const g = this.group;
      let options, model;
      if (g) {
        options = g.options;
        model = g.modelValue;
      } else {
        options = this.options;
        model = this.modelValue;
      }
      if (!model?.length)
        return 0;
      return options?.length == model?.length ? 1 : 2;
    }
  },
  methods: {
    check() {
      if (this.group) {
        this.group.toggleAll();
      } else {
        if (!this.modelValue)
          return;
        const state = this.state;
        this.modelValue.length = 0;
        if (state != 1)
          // 全选
          this.modelValue.push(...this.options.map(i => i.value));
      }
    },
  }
}
</script>

<style lang="scss">
.ee-checkbox-all {
  [active] {
    .checked {
      .selected {
        width: 70%;
        height: .1em;
        border-radius: 1em;
      }
    }
  }
}
</style>